<template>
	<comRoot :isShowLimitWarm="true" @execAfterToken="getRewardInfoFun">
		<template #page>
			<comDetailNavigateBack :title="pagePoolTitle" />
			
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />
			
			<video
				:src="`${commonConfigs.domainFrontFileLink}/files/avideo/super-jackpot.mp4`"
				:muted="false" style="display: none;"></video>
			
			<video
				v-if="isShowMaxAward"
				:style="{
					'position': 'fixed',
					'left': '0rpx',
					'top': '0rpx',
					'width': '100vw',
					'height': '100vh',
					'z-index': 12000,
				}"
				:src="`${commonConfigs.domainFrontFileLink}/files/avideo/super-jackpot.mp4`"
				autoplay
				:muted="false"
				:controls="false"
				id="dragoVideo" ></video>
			
			<view class="reward-page relative font-hanserif-bold">
				
				<view class="reward-info-content relative" :style="{
						overflow: 'auto',
						height: `calc(100vh - ${commonNavHeight})`,
					}">
					
					<!-- 轮播图 -->
					<comCarouselCard :resLists="cardList"></comCarouselCard>
					
					<!-- 闯关 -->
					<view class="challenge-content relative" v-if="poolTypeSence === 'challengeSence'">
						<view class="challenge-box-bottom absolute font-hanserif-bold" v-if="currentChallengeIndex !== 0">
							<view class="relative challenge-ticket flex-all-center">
								<image class="bg"
									style="width: 170rpx;height: 36rpx;"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/challenge/ticket-bg.png`"
									mode=""></image>
									
								<image class="relative"
									style="width: 32rpx;height: 32rpx;margin-right: 6rpx;margin-top: 0rpx;"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/challenge/ticket-icon.png`"
									mode=""></image>
									
								<view class="text-nowrap relative">闯关票：<text style="color: #4470FF;">{{ challengeConfigList[currentChallengeIndex].nums }}张</text></view>
							</view>
						</view>
						
						<view class="challenge-box-top relative flex">
							<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/challenge/challenge-top-bg.png`" mode="">
							</image>
							
							<view class="box-top-right flex-full relative" v-if="challengeConfigList && challengeConfigList.length">
								<scroll-view class="top-right-content"
									:scroll-x="true"
									scroll-with-animation
									:scroll-into-view="poScrollViewInto"
									:enable-flex="true"
								>
									<view class="flex flex-justify-content-between" :style="{
										'min-width': '100%',
										'width': 'fit-content',
										'background': `url(${commonConfigs.domainFrontFileLink}/files/images/challenge/challenge-process-non.png) 0 0 no-repeat`,
										'backgroundSize': '90% 15rpx',
										'backgroundPosition': '20% 40%',
									}">
										<view class="flex-justify-content-between" :style="{
											'min-width': '100%',
											'width': 'fit-content',
											'background': `url(${commonConfigs.domainFrontFileLink}/files/images/challenge/challenge-process.png) 0 0 no-repeat`,
											'backgroundSize': currentProcessLength,
											'backgroundPosition': '10% 40%',
										}">
										
											<view class="progress-content relative" 
												v-for="(item, index) in challengeConfigList" :key="index" 
												:id="`id-${index}`"
												@click="clickChallengeIndexFun(index)">
												
												<view class="progress-img relative">
								
													<image class="bg active chest-active" v-if="item.nums || index === 0"
														style="width: 96rpx;height: 100rpx;margin-top: -10rpx;"
														:src="`${commonConfigs.domainFrontFileLink}/files/images/challenge/challenge-active.png`"
														mode=""></image>
													<image class="bg active" v-else
														style="width: 96rpx;height: 100rpx;margin-top: -10rpx;"
														:src="`${commonConfigs.domainFrontFileLink}/files/images/challenge/challenge-non.png`"
														mode=""></image>
														
													<image class="bg active" v-if="currentChallengeIndex === index"
														style="width: 112rpx;height: 112rpx;top: -16rpx;bottom: 0;left: -8rpx;right: 0;margin: auto;z-index: 0;"
														:src="`${commonConfigs.domainFrontFileLink}/files/images/challenge/current-challenge.png`"
														mode=""></image>
														
												</view>
												
												<view v-if="currentChallengeIndex === index" class="progress-day-txt">
													<text class="progress-day-num">当前位置</text>
												</view>
												<view v-else-if="(challengeConfigList.length - 1) === index" class="progress-day-txt">
													<text>最终关</text>
												</view>
												<view v-else class="progress-day-txt">
													<text>第</text>
													<text>{{ numToTextList[index] }}</text>关
												</view>
												
											</view>
								
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
						
					</view>
					
					<view class="left-side-page absolute">
						<button open-type="share" class="share-button" @click="share">
							<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/ico-share.png`" class="left-side-box" mode=""></image>
						</button>
						<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/ico-des.png`" class="left-side-box" mode="" @click="setShowRuleFun"></image>
					</view>
					
					<view class="info-detail">
						<view class="info-tab-type flex margin-auto"
							:style="{position: 'sticky',left: 0,top: 0,'z-index': 1000}">
							<view class="tab-type-box relative flex-all-center font-hanserif-regular" :class="currentTabType === item.type ? 'active' : ''" v-for="(item, index) in tabAreaList" :key="index" @click="setTabAreaFun(item.type)">
								<image class="bg" v-if="currentTabType === item.type" 
									:src="`${commonConfigs.domainFrontFileLink}/files/images/common/tabarea-item-active.png`" mode=""></image>
								<image class="bg" v-else
									:src="`${commonConfigs.domainFrontFileLink}/files/images/common/tabarea-item.png`" mode=""></image>
								<view class="relative" :style="{
									color: currentTabType === item.type ? '#FFFFFF' : '#FFFFFF'
								}">{{ item.name }}</view>
							</view>
						</view>
						
						<view v-if="poolTypeSence !== 'challengeSence'" class="relative heat-box flex-align-items-center">
							<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/hot-bg.png`" mode=""></image>
							<text class="heat-box-txt font-hanserif-bold relative">{{ rewardData.max_num_sort }}</text>
						</view>
						
						<view class="info-list margin-auto" v-if="currentTabType === 0">
							<view class="list-content" v-for="(item, index) in ratePoolList" :key="index">
								<view class="list-content-name flex-align-items-center flex-justify-content-between">
									<view class="content-name-box relative flex-align-items-center">
										<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/text-${item.reward_item_type && item.reward_item_type.toLowerCase()}.png`" mode=""></image>
										<image class="content-name-level_img" :style="item.reward_item_type === 'SP' ? 'width: 54rpx;margin-left: 4rpx;margin-right: 22rpx;' : ''" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/level-${item.reward_item_type && item.reward_item_type.toLowerCase()}.png`" mode="aspectFit"></image>
										<text class="relative content-name-txt">
											<text v-if="currentChallengeIndex === (challengeConfigList.length - 1)">通关大奖：</text>
											<text v-else-if="item.reward_item[0] && item.reward_item[0].gyms_scene_change">通关门票：</text>
											<text v-else>赏级物品：</text>
											<!-- 获得概率： -->
											{{ item.rate }}%
										</text>
									</view>
									<image class="content-open-icon" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/${item.isOpenUp ? 'ico-open.png' : 'ico-close.png'}`" mode="" @click="setOpenRecordFun(item, index)"></image>
								</view>
								
								<view class="list-content-tip flex-align-items-center">
									<image class="content-tip-icon" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/tips.png`" mode=""></image>
									<text>获得概率为初始参考概率，实际概率随着抽赏进度动态变化</text>
								</view>
								
								<view class="list-content-pool flex" :class="item.isOpenUp ? 'content-pool-openup' : ''">
									<view class="content-pool-detail" v-for="(subItem, subIndex) in item.reward_item" :key="subIndex" @click="gooShopDetailFun(subItem, subIndex)">
										<view class="content-pool-cover relative flex-all-center">
											<image class="bg absolute" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/border-${subItem.reward_item_type && subItem.reward_item_type.toLowerCase()}.png`" mode=""></image>
											<comPlaceImage
												class="pool-cover-img absolute"
												placeImageClass="flex-all-center"
												:lazyLoad="true"
												:src="subItem.reward_item_cover"
												mode="heightFix"></comPlaceImage>
												
											<image class="absolute"
												v-if="subItem.gyms_scene_change === 1"
												style="width: 40rpx;height: 40rpx;left: 12rpx;top: 2rpx;z-index: 100;"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/challenge/ticket-icon.png`"
												mode=""></image>
											
											<view class="content-pool-txt absolute" v-if="showNoticeTxtFun(subItem.reward_item_name, 8)" style="margin-top: 10rpx;">
												<uni-notice-bar
													class="uni-notice-bar"
													color="#111111"
													background-color="transparent"
													:scrollable="true"
													:single="true"
													:text="showNoticeTxtFun(subItem.reward_item_name, 8)"
													:speed="54"
												></uni-notice-bar>
											</view>
											<view class="content-pool-txt truncate absolute" v-else>{{ subItem.reward_item_name }}</view>
										</view>
										
									</view>
								</view>
							</view>
						</view>

						<scroll-view v-if="currentTabType !== 0" scroll-y @scrolltolower="scrolltolower" :style="{
							minHeight: '500rpx',
							maxHeight: '1020rpx',
						}" class="info-record margin-auto">
							<view v-if="!resLists.length" style="width: 100%; height: 100%;">
								<comEmptyData></comEmptyData>
							</view>
							
							<view class="detail-HC-data relative flex-align-items-center" v-for="(item, index) in resLists" :key="index">
								<image
									class="bg"
									v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/record-list.png`"
									mode=""
								></image>
								<template v-if="item && !item.nickname">
									<image
										class="detail-disble-btn"
										v-if="commonConfigs && commonConfigs.domainFrontFileLink"
										:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/no-buy.png`"
										mode=""
									></image>
								</template>
								<template v-else>
									<view class="info-record-detail relative flex-align-items-center" >
										<view class="record-cover flex-all-center relative">
											<image class="record-cover-img" :src="item.avatar" mode=""></image>
											<image class="absolute" v-if="item.vip_cover" :src="item.vip_cover" mode="heightFix"
												:style="{
													'border-radius': 'unset',
													'width': 'auto',
													'top': '-18rpx',
													'left': '-20rpx',
													'right': 0,
													'height': '110rpx',
													'margin': 'auto',
													'z-index': 1,
												}"></image>
										</view>
										<view class="record-name relative">
											<view class="record-name-txt truncate">{{ item.nickname }}</view>
											<view class="record-name-dates truncate">{{ item.create_time }}</view>
										</view>
										<view class="record-award relative flex-direction-column flex-align-items-center">
											<image v-if="item.reward_item_type" class="record-award-type" :class="[item.reward_item_type && item.reward_item_type.toLowerCase()]" :src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/level-${item.reward_item_type && item.reward_item_type.toLowerCase()}.png`" mode="heightFix"></image>
											<view class="record-award-name truncate">{{ item.reward_item_name }}</view>
										</view>
									</view>
								</template>
							</view>
							
							<comLoadMore class="loadmore-txt" :loading="loading" :showLoadendTxt="showLoadendTxt"></comLoadMore>
						</scroll-view>
						
					</view>
				</view>
				
				<view class="right-side-page fixed">
					<image class="right-side-icon" :src="`${commonConfigs.domainFrontFileLink}/files/images/common/ico-bag.png`" mode="" @click="gooPageUrl('/secondary/bagPage/bagPage')"></image>
					<image class="right-side-icon" :src="`${commonConfigs.domainFrontFileLink}/files/images/common/ico-refresh.png`" mode="" @click="setReloadFun"></image>
				</view>
				
				<view class="oper-btn-box fixed flex flex-align-items-center flex-justify-content-around" v-if="rewardData && rewardData.reward_sheet_range">
					<view class="oper-btn-info flex relative" v-for="(item, index) in rewardData.reward_sheet_range" :key="index"
					@click="item.reward_price_status === 'can' ? setPreOrderFun(item.reward_price_number) : ''"
					>
						<view :class="['oper-btn-img', 'flex', 'flex-direction-column', 'flex-all-center', 'relative', setDisableFun(item.reward_price_status)]">
							<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/common/buy-btn.png`"/>
							
							<view class="oper-btn-detail relative">
								<view class="relative oper-btn-txt font-hanserif-bold text-nowrap" style="z-index: 2;">{{ item.reward_price_desc }}</view>
							</view>
							
							<view class="oper-btn-price relative font-hanserif-bold" v-if="poolTypeSence === 'integral'">
							  <view class="relative oper-btn-price-txt" style="z-index: 2;">{{ item.reward_price }}积分</view>
							</view>
							<view class="oper-btn-price relative font-hanserif-bold" v-else>
							  <view class="relative oper-btn-price-txt" style="z-index: 2;">￥{{ item.reward_price }}</view>
							</view>
						</view>
					</view>
				</view>
				
				<comMask v-model="isShowFinalRes" @click.stop="isShowFinalRes = true">
					<view class="award-result-uppop relative"
						:style="{
							'top': get_ticket_num ? '-24rpx' : 'unset',
						}"
					>
						<view class="award-result-box relative"
						:style="{
							'width': get_ticket_num ? '670rpx' : '670rpx',
							'height': get_ticket_num ? '830rpx' : '782rpx',
						}"
						>
							<image
								v-if="commonConfigs && commonConfigs.domainFrontFileLink && get_ticket_num"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/common/challenge-reward-box-bg.png`"
								class="bg"
								mode=""
							></image>
							<image
								v-if="commonConfigs && commonConfigs.domainFrontFileLink && !get_ticket_num"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/common/reward-box-bg.png`"
								class="bg"
								mode=""
							></image> 
							
							<view v-if="get_ticket_num" class="absolute font-hanserif-bold" style="top: 60rpx;width: 100%;text-align: center;color: #4470FF;font-size: 30rpx;">
								闯关成功，获得闯关票<text style="color: #4470FF;margin: 0 6rpx;">{{ get_ticket_num }}</text>张!
							</view>
							
							<scroll-view class="" :style="{ height: `calc(100% - 20rpx)` }" scroll-y enable-flex scroll-with-animation>
								<comRewardList :getTicketNum="get_ticket_num" :rerwardAnimateClass="rerwardAnimateClass" :awardData="awardData" v-show="isShowRewardRes"></comRewardList>
							</scroll-view>
						</view>
						
						<view class="award-result-btns relative flex-justify-content-evenly">
							<view class="result-btn-img relative" @click.stop="setCloseUppopFun">
								<image :src="`${commonConfigs.domainFrontFileLink}/files/images/popup/reward-btn-back.png`" class="bg" mode=""></image>
							</view>
							<view class="result-btn-img relative" @click.stop="gooPageUrl('/secondary/bagPage/bagPage')">
								<image :src="`${commonConfigs.domainFrontFileLink}/files/images/popup/reward-bag-btn-cancel.png`" class="bg" mode=""></image>
							</view>
							<view
								class="result-btn-img relative" @click.stop="setOnceMoreFun">
								<image :src="`${commonConfigs.domainFrontFileLink}/files/images/popup/reward-btn-confirm.png`" class="bg" mode=""></image>
							</view>
						</view>
					</view>
				</comMask>
				
				<comRewardOrder 
					ref="comRewardOrder"
					v-model="isShowOrderUppop" 
					:poolTypeSence="poolTypeSence" 
					:rewardData="rewardData" 
					:rewardBtnNum="rewardBtnNum"
					:isMaxRewardNum="isMaxRewardNum"
					:ticketNums="ticketNums"
					:fromUseSence="'infiniteRewardSence'"
					:isChallengeSence="isChallengeSence"
					@setPayOrderFun="setPayOrderFun" 
					@setNextOrderFun="setNextOrderFun"
					@setSelectCouponFun="setSelectCouponFun" 
					@setCurrentPaysFun="setCurrentPaysFun"
					@setAgreeFun="$store.commit('SHOW_AGREEMENT_SET_FUN', true)"></comRewardOrder>
				
				<comRuleUppop v-model="isShowRuleUppop" :isShowPoolRuleTxt="true"
					ruleName="闯关说明"
					:isShowCheckRuleFlag="isShowCheckRuleFlag" :type="ruleType" :ruleTypeValue="ruleTypeValue"
					:isNeedReadedClose="false" :isAllowedClickMaskClose="false">
					<template>
						<view v-html="ruleImgTxt"></view>
					</template>
				</comRuleUppop>
				
				<view class="fixed" style="z-index: 1000; left: 38rpx; top: 160rpx;" @click.stop="setShowOHFun">
					<comDragBox :x="systemInfo.windowWidth - 100" :y="200" v-if="isShowOHEntry" >
						<comDragInfo :ouHuangInfo="ouHuangInfo"></comDragInfo>
					</comDragBox>
				</view>
				
				<comOuHuangUppop 
					v-model="isShowOuHuangUppop" 
					:ouHuangList="ouHuangList" 
					:ouHuangInfo="ouHuangInfo" 
					:rewardPoolId="rewardPoolId"
				></comOuHuangUppop>
				
				<comTextPopup v-model="showAgreeTxtPopup">
					<template #title>
						{{ agreeBoxTitle }}
					</template>
					<view class="" v-html="agreeBoxContent"></view>
				</comTextPopup>
				
			</view>
		</template>
	</comRoot>
</template>

<script>
	import audio from '@/setupproject/AVIDEO_FUN.js';
	import store from '@/store';
	import { ACTIONS } from '@/store/modules/userStore';
	import paging from '@/inmixed/paging.mixin.js';
	import otherpay from '@/inmixed/otherpay.mixin.js'
	import {
		payment
	} from '@/setupproject/PAYS_FUN';
	
	import {
		setAsyncFunWait,
		boxIndexSetFun,
		wxAuthSetFun,
		addPhoneSetFun
	} from '@/setupproject/TOOLS_FUN';
	
	import {
		geChallengeOrderPreApi,
		geChallengeOrderApi,
		geChallengeResApi,
		getContentHomeApi,
		getRewardOrderPointApi,
		getRewardViewAgreementApi,
		getRewardOrderPointPreApi,
		geChallengeRecordApi,
		getPoolInfiniteIOuHuangApi,
		getPoolInfiniteItemSpeedApi,
		getPoolChallengeInfoApi,
		getPoolChallengeItemSpeedApi,
	} from '@/setupproject/INTERFACE';
	
	export default {
		name: 'challengePage',
		mixins: [otherpay, paging],
		data() {
			const systemInfo = uni.getSystemInfoSync()
			return {
				isLoading: true,
				ruleImgTxt: '',
				isShowRuleUppop: false,
				isShowCheckRuleFlag: true,
				ruleTypeValue: 0,
				rewardData: {},
				cardList: [],
				rewardPoolId: '',
				poolTypeSence: '',
				
				// 监听返回当前平台时触发支付结果事件
				payBeInfos: {
					isPayBackSence: false,
					isReward: true,
					type: null,
					balance_order_num: null
				},
				apiPayTypeVal: 5,
				currentPayType: 'wxpay',

				awardData: [],
				get_ticket_num: 0,
				isShowRewardRes: false,
				isShowFinalRes: false,
				isShowMaxAward: false, 
				currentIdCoupon: '',
				isShowOrderUppop: false, 
				rewardBtnNum: 1,
				isResponding: true,
				submitLoading: false,
				isOnceMoreShowing: false,
				currentTabType: 0,
				tabAreaList: [
					{name: '赏品预览', type: 0, popupBgLink: `/files/images/infinite/tab-preview.png`},
					{name: '中奖记录', type: 1, popupBgLink: `/files/images/infinite/tab-record.png`},
					{name: '抽赏记录', type: 2, tabSence: 'tab-record-all', popupBgLink: `/files/images/infinite/tab-record-all.png`},
				],
				ratePoolList: [],
				awardRecordData: [],
				systemInfo,
				isShowOuHuangUppop: false,
				ouHuangInfo: {},
				ouHuangList: {},
				
				showAgreeTxtPopup: false,
				agreeBoxTitle: '',
				agreeBoxContent: '',
				gameBallInfo: {
					barNum: 0, 
					barNumAll: 0,
				},
				
				isMaxRewardNum: false,
				isMoreSureBall: false,
				// isShowBallPrompt: false,
				ballPromptTxt: '您已勾选组合支付方式中的双倍球，是否确定使用？',
				
				isShowBallMask: false,
				scheduleDoubleNum: 0,
				rerwardAnimateClass: '', // 再抽一次动画动态类名
				scaleRewardLoading: false, // 等待再抽一次接口响应
				
				ruleType: 'challenge',
				
				numToTextList: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'],
				currentProcessLength: 0,
				currentChallengeIndex: 0,
				isChallengeSence: false,
				challengeConfigList: [], // 闯关列表
				
				poScrollViewInto: '',
				
				isReloading: false, // 是否正在刷新
			};
		},
		computed: {
			isShowOHEntry() {
				return this.rewardData && this.rewardData.is_open_mowang;
			},
			boxSubIndex() {
				return store.getters.boxSubIndex;
			},
			commonOnline() {
				return store.getters.commonOnline;
			},
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
			commonPaySortList() {
				return store.getters.commonPaySortList;
			},
			ticketNums() {
				if(this.challengeConfigList && this.challengeConfigList[this.currentChallengeIndex]) {
					return this.challengeConfigList[this.currentChallengeIndex].nums;
				}else{
					return 0;
				}
			},
			pagePoolTitle() {
				let pagePoolTitle = '';
				
				if(this.poolTypeSence === 'challengeSence') {
					pagePoolTitle = '闯关 · ' + (this.rewardData.reward_pool_name || '');
				}else{
					pagePoolTitle = '飞机赏 · ' + (this.rewardData.reward_pool_name || '');
				}
				
				return pagePoolTitle;
			},
			showLoadendTxt() {
				return this.isShowPageLoadedTxt && !this.loading && this.resLists.length ? true : false;
			},
		},
		watch: {
			isShowOuHuangUppop(v) {
				if(v) {
					this.geOuHuangListFun();
				}
			},
		},
		async onLoad(options) {
			this.rewardPoolId = options.id; 
			
			if (options.poolTypeSence) {
				this.poolTypeSence = options.poolTypeSence
			}
			
			if (options.boxSubIndex) {
				boxIndexSetFun(options.boxSubIndex);
			}
			
			if (options.type) {
				this.ruleType = options.type;
			}
			
			// 获取手机号避免抽赏时出现手机号授权弹框
			await store.dispatch(ACTIONS.USER_INFO_GET_FUN);
			
			// await this.getRewardInfoFun();
			
			await this.isShowPoolAgreeFun();
		},
		
		onShow() {
			// #ifdef APP-PLUS
			if(this.$store.getters.detailRechargeFlag) {
				uni.$emit('update', 'comRewardOrder');
				
				// 详情页充值标志位
				this.$store.commit('SET_DETAIL_RECHARGE_FLAG', false);
				return;
			}
			// #endif
			
			// 监听返回当前平台时触发支付结果事件
			if(this.payBeInfos.isPayBackSence && ['adapay_mini', 'alipay', 'yeepay_wx', 'adapay_alipay', 'mbpay_jump_mini'].includes(this.currentPayType)){
				this.payBeInfos.isPayBackSence = !this.payBeInfos.isPayBackSence;
				this.$store.commit('SET_WATCH_PLAT_PARAMS', {
					'type': this.payBeInfos.type,
					'balance_order_num': this.payBeInfos.balance_order_num,
					'msg': '已购买成功，请去赏袋查看',
					'isReward': true
				});
			}
		},
		
		onShareAppMessage(e) {
			let path = `/secondary/challengePage/challengePage?id=${this.rewardPoolId}&boxSubIndex=${this.boxSubIndex}&type=challenge&fromlink=challengeSence&poolTypeSence=challengeSence`;
			
			if (e.from === 'menu') {
				this.$store.commit('SHARE_INFO_SET_FUN', {
					title: this.rewardData.reward_pool_name,
					path,
					imageUrl: this.rewardData.reward_pool_cover,
					content: '',
					desc: ''
				});
			}
			uni.showLoading({
				title: '',
				mask: false
			});
			const promise = new Promise((resolve) => {
				setTimeout(() => {
					const {
						shareObjData
					} = this.$store.getters;
					resolve(shareObjData)
					uni.hideLoading();
				}, 200);
			});
		
			return {
				promise
			};
		},
		
		methods: {
			clickChallengeIndexFun(index) {
				this.currentChallengeIndex = index;
				
				this.pagingInitFun();
				this.resListsGetFun();
				
				// 赏池详情 - 赏品预览
				this.getPoolChallengeItemSpeedApi();
			},
			
			setSureFun() {
				this.isMoreSureBall = true;
				// this.isShowBallPrompt = false;
				this.setPayOrderFun();
			},
			
			async getAgreeFun(item) {
				let type = '';
				if (this.commonOnline) {
					type = item.onlineType;
				} else {
					type = item.type;
				}
				const {
					data,
					code
				} = await getContentHomeApi({
					type
				});
			
				if (code !== 200) {
					return;
				}
				this.agreeBoxTitle = item.title;
			
				this.agreeBoxContent = data.content;
			
				this.showAgreeTxtPopup = true;
			},
			
			numCalculation(nums, sums) {
				if(nums < 0) nums = 0;
				let res = 0;
				if (sums == 0) {
					res = 1;
				} else {
					res = nums / sums > 1 ? 1 : nums / sums;
				}
				return (res * 100).toFixed(2) + '%';
			},
			
			async setTabAreaFun(type) {
				this.currentTabType = type;
				if(type === 1 || type === 2) {
					// this.listsGetFun();
					await this.pagingInitFun();
					await this.resListsGetFun();
				}
			},

			setOpenRecordFun(item, index) {
				let tempList = JSON.parse(JSON.stringify(this.ratePoolList));
				this.ratePoolList = [];
				tempList[index].isOpenUp = !tempList[index].isOpenUp;
				this.ratePoolList = tempList;
				this.$forceUpdate();
			},
			
			async setReloadFun() {
				if(this.isReloading) return;
				this.isReloading = true;
				
				this.rewardData = {};
				this.ratePoolList = [];
				
				await this.getRewardInfoFun();
				
				// if(this.currentTabType === 1 || this.currentTabType === 2) {
				// 	this.awardRecordData = [];
					
				// 	await this.pagingInitFun();
				// 	await this.resListsGetFun();
				// }
				await setAsyncFunWait(1000);
				await (this.isReloading = false);
			},

			gooShopDetailFun(item, index) {
				item.reward_price_1 = this.rewardData.reward_price_1;
				this.$store.commit('INFINITE_DETAILS_SET_FUN', item);
				
				uni.navigateTo({
					url: '/secondary/goodDetailPage/goodDetailPage?type=infinite'
				});
			},
			
			showNoticeTxtFun(name, len) {
				if (name) {
					var namelen = name.length, sum = 0; 
					for (var i = 0; i < namelen; i++) {
						// 中文: 字符编码大于255
						if (name.charCodeAt(i) > 255) {  
							sum += 2;  // 双字节, 累加2
						} else {
							sum++;  // 单字节, 累加1
						}
					}
					if (sum > len*2) {
						return name;
					}
				}
			},
			
			share() {
				let path = `/secondary/challengePage/challengePage?id=${this.rewardPoolId}&boxSubIndex=${this.boxSubIndex}&type=challenge&fromlink=challengeSence&poolTypeSence=challengeSence`;
				
				this.$store.commit('SHARE_INFO_SET_FUN', {
					title: this.rewardData.reward_pool_name,
					path,
					imageUrl: this.rewardData.reward_pool_cover,
					content: '',
					desc: ''
				});
			},
			
			async getRewardInfoFun() {
				
				const {
					data,
					code
				} = await getPoolChallengeInfoApi({
					gyms_id: this.rewardPoolId, // gyms_id	是	int	闯关ID
				});
							
				if (code !== 200) return;
				this.rewardData = data || {};
				
				if(!data) return;
				
				this.challengeConfigList = data.challengeConfigList;
				
				let currentChallengeIndex = 0;
				for (let i = this.challengeConfigList.length - 1; i >= 0; i--) {
					if(this.challengeConfigList[i].nums > 0) {
						currentChallengeIndex = i;
						break;
					}
				}
				// this.currentChallengeIndex = currentChallengeIndex || 0;
				
				let currentProcessLength = 0;
				if(currentChallengeIndex !== 0) {
					currentProcessLength = 100 * ((currentChallengeIndex + 1) / this.challengeConfigList.length) - 10;
				}
				this.currentProcessLength = `${currentProcessLength + '%'} 15rpx`;
				
				// setTimeout(() => {
				// 	this.poScrollViewInto = 'id-' + currentChallengeIndex;
				// }, 10);
				
				// 赏池详情 - 赏品预览
				await this.getPoolChallengeItemSpeedApi();
				
				if(this.currentTabType === 1 || this.currentTabType === 2) {
					await this.pagingInitFun();
					await this.resListsGetFun();
				}
			},
			
			async getPoolChallengeItemSpeedApi() {
				let reward_pool_gyms_id = 0;
				if(this.challengeConfigList && this.challengeConfigList.length) {
					reward_pool_gyms_id = this.challengeConfigList[this.currentChallengeIndex].reward_pool_gyms_id;
				}
				
				const {
					data,
					code
				} = await getPoolChallengeItemSpeedApi({
					gyms_id: this.rewardPoolId, // gyms_id	是	int	赏池ID
					reward_pool_gyms_id, // reward_pool_gyms_id	是	int	闯关ID
				});
					
				if (code !== 200) return;
				this.cardList = data.reward_item;
				
				this.rewardData =  {
					...this.rewardData,
					...data,
				};
				
				if(!data) return;
				
				this.ratePoolList = data.type_rate_arr;
				this.ratePoolList.map((item, index) => {
					item.isOpenUp = true;
				});
			},
			
			setDisableFun(status) {
				let disabled = false;
				if (status !== 'can') {
					disabled = true;
				}
				return disabled ? 'disabled' : '';
			},

			async isShowPoolAgreeFun() {
				let type = '';
				if (this.commonOnline) {
					type = 53;
				} else {
					type = 52;
				}
			
				this.ruleTypeValue = type;
			
				getRewardViewAgreementApi({
					id: type
				}).then(res => {
					if(res.code === 200) {
						if (res.data.reward_agreement) {
							this.isShowCheckRuleFlag = false;
						}
						if (!res.data.reward_agreement) {
							this.setShowRuleFun();
						}
					}
				})
			},
			
			/* 需要固定为listsGetFun；以配合 paging.mixin */
			async listsGetFun(e) {
				if(!this.rewardPoolId) return;
				
				this.loading = true;
				let tempData, tempCode, resLists;
				
				const {
					data,
					code
				} = await geChallengeRecordApi({
					...this.pageInfoObj,
					log_type: this.currentTabType, // 记录类型：中赏记录 & 抽赏记录
					gyms_id: this.rewardPoolId, // 赏池ID
					reward_pool_gyms_id: this.challengeConfigList[this.currentChallengeIndex].reward_pool_gyms_id, // 场景ID
					gyms_scene_id: this.challengeConfigList[this.currentChallengeIndex].gyms_scene_id, // 关卡ID
					reward_cur_box_num: 1,
				});
				tempData = data;
				tempCode = code;
				resLists = tempData.list;
				
				this.loading = false;
				
				if (tempCode !== 200) return false;
			
				/* 返回 到 paging.mixin 处理 */
				return {
					resLists,
					count: tempData.count
				};
			},
			
			async setShowRuleFun() {
				const {
					data,
					code
				} = await getContentHomeApi({
					type: 35
				});
				
				if (code !== 200) return;
				
				this.ruleImgTxt = data.content;
				this.isShowRuleUppop = true;
			},
			
			orderInfoDats() {
				let orderInfoDats = {
					is_use_infinite_schedule_double_num: store.getters.commonPaySortList.includes(4) ? 1 : 0,
					use_currency_num: store.getters.commonPaySortList.includes(1) ? 1 : 0,
					use_balance: store.getters.commonPaySortList.includes(2) ? 1 : 0,
					coupon_id: store.getters.commonPaySortList.includes(3) ? this.currentIdCoupon : '',
					pay_channel: this.currentPayType,
					reward_pool_id: this.rewardPoolId,
					reward_cur_box_num: 1,
					reward_num: this.rewardBtnNum,
				}
				
				if(this.poolTypeSence === 'challengeSence') {
					orderInfoDats.gyms_id = this.rewardPoolId; // 赏池ID
					orderInfoDats.reward_pool_gyms_id = this.challengeConfigList[this.currentChallengeIndex].reward_pool_gyms_id; // 场景ID
					orderInfoDats.gyms_scene_id = this.challengeConfigList[this.currentChallengeIndex].gyms_scene_id; // 关卡ID
				}
				
				return orderInfoDats;
			},
			
			setSelectCouponFun(value) {
				this.currentIdCoupon = value;
				this.setNextOrderFun();
			},
			
			async setPreOrderFun(num) {
				if (this.submitLoading) return;
			
				// #ifdef MP-WEIXIN
				// 支付前验证是否已登录
				if (!wxAuthSetFun()) return;
				// #endif
			
				// #ifdef APP-PLUS
				// 支付前验证是否已登录
				if (await store.dispatch('SHOW_LOGIN_APP_GET_FUN')) return;
				// 支付前验证是否已绑定手机
				if (addPhoneSetFun()) return;
				// #endif
				
				this.getPayNotice();
			
				this.currentIdCoupon = '';
				this.rewardBtnNum = num;
				
				let rangelen = this.rewardData.reward_sheet_range.length;
				this.isMaxRewardNum = (num == this.rewardData.reward_sheet_range[rangelen - 1].reward_price_number);
				
				this.$set(this.rewardData, 'cover', this.rewardData.reward_pool_cover);
				this.$set(this.rewardData, 'reward_num', this.rewardBtnNum);
				this.$set(this.rewardData, 'num', this.rewardBtnNum);
				this.$set(this.rewardData, 'name', this.rewardData.reward_pool_name);
				
				if(this.poolTypeSence === 'challengeSence') {
					if(this.currentChallengeIndex > 0) {
						if(this.challengeConfigList && this.challengeConfigList[this.currentChallengeIndex].nums >= this.rewardBtnNum) {
							this.isChallengeSence = true;
						}else{
							this.isChallengeSence = false;
							return uni.showToast({
								icon: 'none',
								title: '当前关闯关票不够哦！',
							});
						}
					}else{
						this.isChallengeSence = false;
					}
				}
				
				this.setNextOrderFun();
			},
			
			async setNextOrderFun() {
				if(this.poolTypeSence === 'integral') {
					const { data, code } = await getRewardOrderPointPreApi(this.orderInfoDats());
					
					if (code !== 200) return false;
					
					if (!data) return;
					
					this.$set(this.rewardData, 'currency_num', data.currency_num);
					this.$set(this.rewardData, 'is_view_pay_agreement', data.is_view_pay_agreement);
					this.$set(this.rewardData, 'deduct_balance_rmb', data.deduct_balance_rmb || 0);
					this.$set(this.rewardData, 'infinite_schedule_double_num', data.infinite_schedule_double_num || 0);
					this.$set(this.rewardData, 'deduct_currency_num_rmb', data.deduct_currency_num_rmb || 0);
					this.$set(this.rewardData, 'allPrice', data.reward_price_final);
					this.$set(this.rewardData, 'price', data.reward_price);
					this.$set(this.rewardData, 'beforePrice', data.reward_price_before_coupon);
					this.$set(this.rewardData, 'couponResult', data.coupon_resutl);
					this.$set(this.rewardData, 'points', data.points);
				} else {
					const { data, code } = await geChallengeOrderPreApi(this.orderInfoDats());
					
					if (code !== 200) return false;
					
					if (!data) return;
					
					this.$set(this.rewardData, 'currency_num', data.currency_num);
					this.$set(this.rewardData, 'is_view_pay_agreement', data.is_view_pay_agreement);
					this.$set(this.rewardData, 'deduct_balance_rmb', data.deduct_balance_rmb || 0);
					this.$set(this.rewardData, 'infinite_schedule_double_num', data.infinite_schedule_double_num || 0);
					this.$set(this.rewardData, 'deduct_currency_num_rmb', data.deduct_currency_num_rmb || 0);
					this.$set(this.rewardData, 'allPrice', data.reward_price_final);
					this.$set(this.rewardData, 'price', data.reward_price);
					this.$set(this.rewardData, 'beforePrice', data.reward_price_before_coupon);
					this.$set(this.rewardData, 'couponResult', data.coupon_resutl);
					this.$set(this.rewardData, 'balance', data.balance);
				}
				
				// 没有双倍球的情况下，去掉该默认选项
				if(!this.rewardData.infinite_schedule_double_num && this.commonPaySortList.includes(4)) {
					const index = this.commonPaySortList.indexOf(4);
					this.commonPaySortList.splice(index, 1);
					await store.commit('CHECK_LIST_SET_FUN', this.commonPaySortList);
				}
				
				this.isShowOrderUppop = true;
			},
			
			setCurrentPaysFun(value) {
				this.currentPayType = value
			},
			
			async setPayOrderFun() {
				if (this.submitLoading) return;
				this.submitLoading = true;
			
				if(this.poolTypeSence === 'integral') {
					const { data: productInfos, code, msg } = await getRewardOrderPointApi(this.orderInfoDats());
					this.currentIdCoupon = '';
					if (code !== 200) {
						this.submitLoading = false;
						return uni.showToast({
							icon: 'none',
							title: msg
						});
					}
					
					try {
						if (!productInfos.is_need_wx_pay) {
							await this.getRewardResFun(productInfos.order_num);
							return (this.submitLoading = false);
						}
						await payment(productInfos, this.currentPayType || 'wxpay', this.apiPayTypeVal);
						await this.getRewardResFun(productInfos.order_num);
					} catch (e) {
						this.submitLoading = false;
						console.error(e);
					}
					this.submitLoading = false;
					return;
				}
			
				const {
					data: productInfos,
					code,
					msg
				} = await geChallengeOrderApi(this.orderInfoDats());
				
				this.currentIdCoupon = '';
				
				if (code !== 200) {
					this.submitLoading = false;
					return uni.showToast({
						icon: 'none',
						title: msg
					});
				}
			
				// 原生支付： 微信、小程序、支付宝
				if (['wxapp', 'wxpay', 'alipay_method', 'mbpay_wxmini'].indexOf(this.currentPayType) !== -1) {
					try {
						if (!productInfos.is_need_wx_pay) {
							await this.getRewardResFun(productInfos.order_num);
							return (this.submitLoading = false);
						}
						await payment(productInfos, this.currentPayType || 'wxpay', this.apiPayTypeVal);
						await this.getRewardResFun(productInfos.order_num);
					} catch (e) {
						this.submitLoading = false;
						console.error(e);
					}
					this.submitLoading = false;
					return;
				}
				
				// 第三方小程序微信
				if (['adapay_mini', 'yeepay_wx', 'adapay_alipay', 'lianlianpay', 'mbpay_jump_mini'].includes(this.currentPayType)) {
					try {
						if (!productInfos.is_need_wx_pay) {
							await this.getRewardResFun(productInfos.order_num, msg);
							return this.submitLoading = false;
						}
						productInfos.balance_order_num = productInfos.order_num;
						return this.launchMPToPayFun(productInfos, this.currentPayType);
					} catch (e) {
						this.submitLoading = false;
						console.error(e);
					}
					return;
				}
			
			},
			
			async setOnceMoreFun() {
				// 再次一次取消双倍球使用
				if(this.commonPaySortList.includes(4)) {
					// return this.isShowBallPrompt = true;
					const index = this.commonPaySortList.indexOf(4);
					this.commonPaySortList.splice(index, 1);
					await store.commit('CHECK_LIST_SET_FUN', this.commonPaySortList);
				}
				
				if(!this.isResponding && this.submitLoading) return;
				await (this.isOnceMoreShowing = true); // isOnceMoreShowing
				
				await (this.rerwardAnimateClass = 'rerward-animate-shake');
				await (this.scaleRewardLoading = true);
				
				// this.isShowRewardRes = false;
				
				await this.setPayOrderFun();
				
				await setAsyncFunWait(1000);
				await (this.isOnceMoreShowing = false);
				await (this.isMoreSureBall = false);
				await (this.isOnceMoreShowing = false); // 是否再来一抽正在请求中
			},
			
			async getRewardResFun(order_num) {
				this.isResponding = false;
				const {
					data,
					msg,
					code
				} = await geChallengeResApi({
					order_num
				});
			
				if (code !== 200) {
					this.submitLoading = false;
					return uni.showToast({
						icon: 'none',
						title: msg,
						duration: 2000
					});
				}
				
				// this.isOnceMoreShowing = false;
				await (this.rerwardAnimateClass = 'rerward-animate-before');
				await setAsyncFunWait(200);
			
				this.awardData = [];
				this.isShowOrderUppop = false;
				
				this.getRewardInfoFun();
				
				// if(this.currentTabType === 1 || this.currentTabType === 2) {
				// 	this.pagingInitFun();
				// 	this.resListsGetFun();
				// }
				
				await setAsyncFunWait(20);

				this.isShowFinalRes = true;
				this.get_ticket_num = data.scene_nums;
				
				// animation_switch 特效开关 + is_special 大赏开关
				if(!uni.getStorageSync('isRewardAniamteSwitch')) {
					if(data.animation_switch && data.is_special) {
						this.isShowMaxAward = true;
						
						uni.vibrateLong({
							success: function () {
								console.log('success');
							}
						});
					}else{
						this.isShowMaxAward = false;
					}
				}
				
				// 特效 + 大赏 = 龙
				if(this.isShowMaxAward) {
					await (this.scaleRewardLoading = false);
					await (this.rerwardAnimateClass = 'rerward-animate-after');
					
					this.isShowRewardRes = false;
					await setAsyncFunWait(4000);
					
					for (let item of data.sort_detail) {
						this.awardData.push(item)
					}
					
					this.isShowRewardRes = true;
					this.scheduleDoubleNum = data.schedule_double_num;
					this.isShowBallMask = (data.schedule_double_num ? true : false);
					this.$forceUpdate();
					await setAsyncFunWait(1500);
					this.isShowMaxAward = false;
				}else{
					if(!uni.getStorageSync('isRewardAudioSwitch')) {
						audio.setPlayAVideo(`${this.commonConfigs.domainFrontFileLink}/files/avideo/open-box-audio.mp3`); // 中奖声音
					}
					
					await (this.scaleRewardLoading = false);
					await (this.rerwardAnimateClass = 'rerward-animate-after');
					
					for (let item of data.sort_detail) {
						this.awardData.push(item)
					}
					
					this.isShowRewardRes = true;
					this.scheduleDoubleNum = data.schedule_double_num;
					this.isShowBallMask = (data.schedule_double_num ? true : false);
					this.$forceUpdate();
				}
				
				
				await setAsyncFunWait(800);
				this.submitLoading = false;
				this.isResponding = true;
				
				await (this.rerwardAnimateClass = '');
			},
			
			async setShowOHFun() {
				// #ifdef APP-PLUS
				// 支付前验证是否已登录
				if (await store.dispatch('SHOW_LOGIN_APP_GET_FUN')) return;
				// #endif
				this.isShowOuHuangUppop = true;
			},
			
			async geOuHuangListFun() {
				const {
					data,
					code
				} = await getPoolInfiniteIOuHuangApi({
					reward_cur_box_num: 1,
					reward_pool_id: this.rewardPoolId,
				})
				
				this.ouHuangList = data.rank;
			},
			
			async setCloseUppopFun() {
				if(!this.isResponding) return;
				
				await this.getRewardInfoFun();
				
				this.isShowFinalRes = false;
			},
			
			async gooPageUrl(url) {
				if(!this.isResponding) return;

				uni.navigateTo({
					url
				});
			},
			
		}
	};
</script>

<style lang="scss" scoped>
	.reward-page {
		.reward-info-content {
			padding-bottom: 320rpx;
			
			.left-side-page {
				right: 0;
				top: 62rpx;
				
				.left-side-box {
					width: 124rpx;
					height: 53rpx;
					margin-bottom: 18rpx;
				}
			}
			
			.info-pool-name {
				width: 100%;
				height: 64rpx;
				color: #fff;
				text-align: center;
				font-size: 32rpx;
				
				.pool-name-box {
					width: 504rpx;
					height: 60rpx;
				}
				.pool-name-txt {
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
				}
			}
			
			.info-detail {
				.info-tab-type {
					padding: 18rpx;
					
					.tab-type-box {
						width: 162rpx;
						height: 56rpx;
						margin-right: 20rpx;
						font-size: 28rpx;
					}
				}
				
				.heat-box {
					width: 185rpx;
					height: 40rpx;
					margin-left: 22rpx;
					padding-left: 54rpx;
					
					.heat-box-txt {
						color: #FFFFFF;
						font-size: 30rpx;
						// background: linear-gradient(0deg, #FFFFFF 0%, #FFDA4D 100%);
						// -webkit-background-clip: text;
						// -webkit-text-fill-color: transparent;
					}
				}
				
				.info-list {
					width: 700rpx;
					margin-top: 24rpx;
					
					.list-content {
						.list-content-name {
							.content-name-box {
								font-size: 26rpx;
								// margin-left: 20rpx;
								width: 326rpx;
								height: 64rpx;
								.content-name-txt {
									// margin-top: 6rpx;
									color: #FFFFFF;
									min-width: 230rpx;
								}
								.content-name-level_img {
									height: 34rpx;
									width: 36rpx;
									margin: 12rpx 30rpx 10rpx 14rpx;
								}
							}
							
							.content-open-icon {
								width: 110rpx;
								height: 44rpx;
							}
						}
						
						.list-content-tip {
							font-size: 20rpx;
							color: #FFFFFF;
							font-weight: 100;
							margin-top: 18rpx;
							
							.content-tip-icon {
								width: 20rpx;
								height: 20rpx;
								margin-right: 6rpx;
							}
						}
						
						.list-content-pool {
							overflow-x: auto;
							margin-top: 16rpx;
							
							&.content-pool-openup {
								flex-wrap: wrap;
							}
							
							.content-pool-detail {
								width: 162rpx;
								margin-right: 10rpx;
								margin-bottom: 22rpx;
								
								.content-pool-cover {
									width: 152rpx;
									height: 222rpx;
									padding-top: 22rpx;
									
									.pool-cover-img {
										width: 132rpx;
										height: 139rpx;
										top: 36rpx;
										overflow: hidden;
									}
								}
								
								.content-pool-txt {
									width: 100%;
									height: 26rpx;
									line-height: 26rpx;
									color: #000000;
									font-size: 20rpx;
									text-align: center;
									margin-top: 6rpx;
									bottom: 10rpx;
								}
							}
						}
					}
				}
				
				.info-record {
					width: 710rpx;
					
					.detail-HC-data {
						width: 710rpx;
						height: 112rpx;
						margin-bottom: 20rpx;
						padding: 14rpx 24rpx 0;
						
						.detail-disble-btn {
							width: 140rpx;
							height: 43rpx;
						}
						
						.detail-HC-img {
							height: 22rpx;
							font-size: 20rpx;
							color: #FFFFFF;
							background-repeat: no-repeat;
							background-size: cover;
							z-index: 100;
							left: 4rpx;
							top: 6rpx;
							width: 78rpx;
							
							.detail-HC-img-txt {
								margin-left: -12rpx;
							}
						}
						
						.info-record-detail {
							padding: 0rpx 28rpx 0;
							width: 710rpx;
							height: 112rpx;
							
							.record-sort-num {
								width: 83rpx;
								height: 42rpx;
								font-size: 22rpx;
								color: #fff;
								z-index: 100;
								left: 4rpx;
								top: 6rpx;
								
								.sort-num-txt {
									margin-left: -20rpx;
									top: -4rpx;
								}
							}
							
							.record-cover {
								width: 76rpx;
								height: 76rpx;
								margin-right: 24rpx;
								border-radius: 100%;
								
								.record-cover-img {
									width: 68rpx;
									height: 68rpx;
									overflow: hidden;
									border-radius: 100%;
								}
							}
							
							.record-name {
								width: 310rpx;
								
								.record-name-txt {
									color: #262727; 
									font-size: 32rpx;
								}
								.record-name-dates {
									color: #666666;
									margin-top: 6rpx;
									font-size: 24rpx;
								}
							}
							
							.record-award {
								width: 260rpx;
								margin-left: 24rpx;
								
								.record-award-type {
									width: 54rpx;
									height: 36rpx;
								}
								.record-award-name {
									color: #FFFFFF;
									font-size: 24rpx;
								} 
							}
						}
						
						.detail-HC-cover {
							width: 76rpx;
							height: 76rpx;
							margin-right: 28rpx;
							margin-left: 10rpx;
							border-radius: 100%;
							
							.detail-HC-cover-img {
								border-radius: 100%;
								width: 68rpx;
								height: 68rpx;
								overflow: hidden;
							}
						}
						
						.detail-HC-title {
							// width: 316rpx;
							width: 100%;
							
							.in-title-item {
								color: #262727;
								font-size: 22rpx;
							}
							
							.detail-HC-name {
								max-width: 60%;
								color: #262727;
								font-size: 28rpx;
							}
							.detail-HC-dates {
								// margin-top: 6rpx;
								font-size: 20rpx;
								color: #666666;
								margin-left: 10rpx;
							}
						}
						
						.detail-HC-type {
							margin-left: 18rpx;
							width: 248rpx;
							
							.HC-type-give {
								width: 56rpx;
								height: 30rpx;
								right: 14rpx;
								top: 10rpx;
							}
							.HC-type-nums {
								width: 70rpx;
								height: 50rpx;
							}
							.HC-type-tip {
								width: 96rpx;
								height: 52rpx;
							}
							.HC-type-name {
								color: #FF8B1D;
								font-size: 24rpx;
							}
						}
					}
				
				}
			}
		}
		
		.game-ball-box {
			width: 100%;
			height: 246rpx;
			margin-top: -80rpx;
			
			.left-game-ball-box {
				width: 260rpx;
				height: 244rpx;
			}
			
			.right-game-ball-box {
				width: 111rpx;
				height: 111rpx;
				left: -20rpx;
			}
			
			.center-game-ball-box {
				margin-top: 4rpx;
				width: 100%;
				height: 33rpx;

				.progress-box {
					width: 460rpx;
					height: 23rpx;
					left: 150rpx;

					.progress-bar {
						height: 23rpx;
						overflow: hidden;
					}
				}
				
				.progress-num {
					.progress-num-txt {
						top: -30rpx;
						left: 16rpx;
						font-family: MStiffHei PRC;
						font-weight: bold;
						font-size: 22rpx;
						color: #FFDA4D;
						background: linear-gradient(0deg, #FED74C 0%, #FFDA4D 0%, #FFFFFF 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}
				
				.progress-rule-nums {
					top: 4rpx;
					color: #FFDA4D;
					font-size: 24rpx;
				}

				.progress-rule-txt {
					top: 66rpx;
					left: 16rpx;
					font-size: 22rpx;
					color: #777777;
				}
			}
			
		}
		
		.challenge-content {
			.challenge-box-top {
				left: 0;
				right: 0;
				margin: auto;
				width: 100%;
				height: 177rpx;
				// padding: 0 20rpx;
			
				.box-top-right {
					height: 100%;
					overflow-x: auto;
			
					.top-right-content {
						height: 100%;
						padding: 20rpx 20rpx 0;
						
						.progress-content {
							width: 99rpx;
							text-align: center;
			
							.progress-img {
								margin-top: 4rpx;
								width: 96rpx;
								height: 100rpx;
			
								// .progress-line {
								// 	right: 70rpx;
								// 	top: 40rpx;
								// 	width: 120rpx;
								// 	height: 14rpx;
								// 	background: rgba($color: #0B0D11, $alpha: 0.5);
								// 	.progress-num {
								// 		left: 0;
								// 		top: 0;
								// 		max-width: calc(100%);
								// 		height: 14rpx;
								// 		background: #D99F2B;
								// 	}
								// }
			
								.bg {
									z-index: 100;
								}
			
								.active {
									left: 0rpx;
									width: 96rpx;
									height: 100rpx;
								}
								
								// .chest-active {
								// 	left: -18rpx;
								// 	width: 99rpx;
								// 	height: 87rpx	;
								// }
								
							}
			
							.progress-day-txt {
								position: absolute;
								width: 100%;
								text-align: center;
								// left: -8rpx;
								bottom: -34rpx;
								font-size: 20rpx;
								color: #FFFFFF;
								white-space: nowrap;
								.progress-day-num {
									font-weight: bold;
									color: #63FFF7;
								}
							}
						}
			
						// .progress-content+.progress-content {
						// 	margin-left: 70rpx;
						// }
					}
				}
			}
		
			.challenge-box-bottom {
				top: -76rpx;
				font-size: 20rpx;
				color: #111111;
				padding-left: 16rpx;
				margin: 10rpx 0;
				
				.challenge-ticket {
					width: 170rpx;
					height: 36rpx;
				}
				
			}
			
		}
		
		.oper-btn-box {
			bottom: 0;
			z-index: 100;
			width: 100%;
			height: 252rpx;
			
			.oper-btn-info {
				width: 170rpx;
				height: 170rpx;
				
				.oper-btn-img {
					width: 100%;
					height: 100%;
				}
				
				.oper-btn-detail {
					// top: -6rpx;
					font-size: 40rpx;
					color: #63FFF7;
				}
				.oper-btn-price {
					color: #FFFFFF;
					font-size: 24rpx;
					
					.oper-btn-price-txt {
						color: #FFFFFF;
						font-size: 24rpx;
					}
					
				}
			}
			
		}
		
		
	}

	.award-result-uppop {
		font-size: 22rpx;
		color: #111111;
		padding: 0 30rpx;
		
		.award-result-box {
			width: 670rpx;
			height: 782rpx;
			padding-top: 80rpx;
		}
	
		.award-result-btns {
			height: 70rpx;
			margin-top: 32rpx;
			
			.result-btn-img {
				width: 168rpx;
				height: 68rpx;
			}
		}
	}
	
	
	.right-side-page {
		right: 18rpx;
		top: 780rpx;
		z-index: 1000;
		
		.right-side-icon {
			width: 114rpx;
			height: 126rpx;
			margin-bottom: 26rpx;
		}
	}
	
	.roulette-mask {
		top: 0;
		left: 0;
		z-index: 1001;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.82);
	
		.roulette-mask-view {
			height: 100%;
			z-index: 10;
	
			.view-box-content {
				color: #FFFFFF;
				flex-direction: column;
				animation: openBoxSize 0.6s both 0.3s 1;
				-webkit-animation: openBoxSize 0.6s both 0.3s 1;
				visibility: hidden;
	
				@keyframes openBoxSize {
					0% {
						transform: scale(0);
						visibility: hidden;
					}
	
					100% {
						transform: scale(1);
						visibility: visible;
					}
				}
			}
			
			.mask-view-box {
				color: #fff;
				width: 730rpx;
				height: 460rpx;
				
				.view-box-info {
					width: 590rpx;
					left: 0;
					right: 0;
					top: 120rpx;
					margin: auto;
					overflow-x: auto;
				
					.box-info-item+.box-info-item {
						margin-left: 20rpx;
					}
				
					.box-info-cover {
						width: 208rpx;
						height: 210rpx;
					}
				
					.box-info-txt {
						font-size: 30rpx;
						margin-top: 12rpx;
						color: #FFDA4D;
						
						.box-info-nums {
							margin-left: 6rpx;
						}
					}
				}
			}
	
		}
	
	
		.roulette-record {
			width: 700rpx;
			height: 1110rpx;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
	
			.roulette-record-info {
				width: 660rpx;
				height: 850rpx;
				left: 0;
				right: 0;
				top: 150rpx;
				margin: auto;
				overflow-y: auto;
	
				.roulette-record-item {
					width: 660rpx;
					height: 142rpx;
					margin-bottom: 20rpx;
					padding: 0 24rpx;
	
					.record-item-left {
						margin-right: 24rpx;
						width: 380rpx;
	
						.record-item-name {
							color: #00003A;
							font-size: 36rpx;
						}
	
						.record-item-time {
							color: #737373;
							font-size: 20rpx;
						}
					}
	
					.record-item-right {
						width: 116rpx;
						height: 116rpx;
					}
				}
			}
		}
	
	}
	
</style>
